<template>
  <div class="E-new-music-songs">
    <div class="wrap-head clear-float">
      <span class="btn-span">
        <i class="el-icon-video-play" />
        播放全部
      </span>
      <div class="float-right">
        <el-button size="mini">
          <i class="el-icon-folder-add" />
          收藏全部
        </el-button>
      </div>
    </div>
    <div
      class="wrap-body"
      v-loading="load"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    >
      <p class="no-data" v-if="!dataArr.length">暂无数据</p>
      <div
        class="box-item"
        v-for="(item, index) in dataArr"
        :key="index"
        :class="{active:active===index}"
        @click="active=index"
      >
        <div class="box-index flex-center">
          <i v-if="active===index" class="fa fa-volume-up" />
          <span v-else>{{index|toStr}}</span>
        </div>
        <div
          :class="{active:active===index}"
          class="box-image bg-image-cover flex-center"
          v-lazy:background-image="`${item.album.picUrl}?param=100y100`"
        >
          <i v-if="active===index" class="fa fa-pause-circle-o" />
          <i v-else class="fa fa-play-circle-o" />
        </div>
        <div class="box-content">
          <p class="name text-ellipsis">
            <span style="margin-right:5px;">{{item.name}}</span>
            <el-tag
              style="margin-right:5px;"
              size="mini"
              v-if="item.alias[0]"
              type="info"
              effect="plain"
            >{{ item.alias[0] }}</el-tag>
            <i v-if="item.mvid" class="fa fa-youtube-play" />
          </p>
          <p class="artists text-ellipsis">
            <template v-for="(it, i) in item.artists">
              <span class="btn-span" :key="i">{{it.name}}</span>
              <i class="cutting-line" v-if="item.artists.length!==i+1" :key="`-${i}`" />
            </template>
          </p>
          <p class="album text-ellipsis">
            <span class="btn-span">{{item.album.name}}</span>
          </p>
          <p class="duration text-ellipsis">{{item.duration|durationFormatter}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tool from '@/plug-in/Tool';

export default {
  props: ['type'],
  mounted() {
    this.getData();
  },
  data() {
    return {
      dataArr: [],
      active: -1,
      load: false
    };
  },
  methods: {
    getData() {
      this.load = true;
      this.$api.get('reco_new-music', { type: this.type }, true).then(({ data }) => {
        this.dataArr = data;
      }).finally(() => { this.load = false; });
    }
  },
  filters: {
    toStr(val) {
      return val < 10 ? (`0${val + 1}`).slice(-2) : val + 1;
    },
    durationFormatter(val) {
      const total = val / 1000;
      return Tool.durationFormat(total);
    }
  }
};
</script>

<style lang="scss" scoped>
.E-new-music-songs {
  @import "@/plug-in/_base.scss";
  $border: 0.5px solid rgb(232, 232, 234);
  // 字体颜色有三个级别
  $color: #555;
  $color-hover: #333;
  $color-active: #000;
  border: $border;
  line-height: 20px;
  & > .wrap-head {
    padding: 10px;
    & > .btn-span {
      display: inline-block;
      vertical-align: middle;
      color: $color;
      cursor: pointer;
      &:hover {
        color: $color-hover;
      }
      & > i {
        vertical-align: middle;
        font-size: 20px;
        color: #f40;
      }
    }

    & > .float-right {
      float: right;
    }
  }
  & > .wrap-body {
    & > .no-data {
      line-height: 100px;
      text-align: center;
      color: #ccc;
      border-top: $border;
    }
    & > .box-item {
      padding: 8px 0;
      cursor: default;
      display: flex;
      border-top: $border;
      $size: 40px;
      color: $color;
      &:nth-child(2n-1) {
        background-color: rgba(245, 245, 247, 0.5);
      }
      &:hover {
        background-color: rgb(235, 236, 237);
        color: $color-hover;
      }
      &.active {
        background-color: rgb(227, 227, 229);
        & > .box-content {
          color: $color-active;
          & > p.name {
            color: $color-active;
          }
        }
      }
      & > .box-index {
        width: $size;
        height: $size;
        flex: 0 0 $size;
        text-align: center;
        & > i {
          color: rgb(198, 47, 47);
        }
      }
      & > .box-image {
        width: $size;
        height: $size;
        flex: 0 0 $size;
        cursor: pointer;
        & > i {
          font-size: $size * 0.6;
          color: rgba(0, 0, 0, 0.5);
          transition: color 0.3s;
          &:hover {
            color: #fff;
          }
        }
        &.active {
          & > i {
            color: #fff;
          }
        }
      }
      & > .box-content {
        position: relative;
        flex-grow: 1;
        height: $size;
        padding: 0 10px;
        overflow: hidden;
        display: flex;
        & > p {
          height: $size;
          font-size: 12px;
          line-height: $size;
          &.name {
            color: $color-hover;
            flex-grow: 1;
          }
          &.artists {
            width: 25%;
            flex: 0 0 25%;
            margin-left: 5px;
          }
          &.album {
            width: 30%;
            flex: 0 0 30%;
            margin-left: 5px;
          }
          &.duration {
            width: 40px;
            text-align: center;
            flex: 0 0 40px;
          }
          & > .fa {
            cursor: pointer;
            margin-right: 5px;
            &.fa-youtube-play {
              color: rgb(198, 47, 47);
            }
          }
          .cutting-line {
            &::before {
              content: "/";
              margin: 0 3px;
              color: $color;
            }
          }
          & > .btn-span {
            cursor: pointer;
            &:hover {
              color: $color-active;
            }
          }
        }
      }
    }
  }
}
</style>
